<template>
  <div style="padding: 32px 0; background-color: #fff;">
    <a-steps
      direction="horizontal"
      progress-dot
      style="margin: 0 auto; width: 100%;flex-wrap: wrap;"
      :current="1"
      size="small"
    >
      <!-- <a-popover slot="progressDot" slot-scope="{ index, prefixCls }">
        <template slot="content">
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType') === 0">
            发起人 ：{{ getContent(index, 'approverName') }}
          </p>
          <p style="margin-bottom: 5px;" v-else>审批人 ：{{ getContent(index, 'approverName') }}</p>
          <p style="margin-bottom: 5px;">单位 ：{{ getContent(index, 'departName') }}</p>
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType') === 0">
            时间：{{ getContent(index, 'createTime') }}
          </p>
          <p style="margin-bottom: 5px;" v-else>时间：{{ getContent(index, 'approverTime') }}</p>
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType') !== 0">
            意见：{{ getContent(index, 'remark') }}
          </p>
        </template>
        <span :class="`${prefixCls}-icon-dot`" />
      </a-popover> -->
      <a-step
        v-for="(item, index) in list"
        :key="index"
        :title="item[0].nodeName"
        :status="setStatus(item[0].status)"
        style="margin-bottom: 28px;"
      >
        <!-- <a-icon
          v-if="item.recordType === 2"
          type="exclamation-circle"
          slot="icon"
          :style="{ color: '#FE6601', fontSize: '24px' }"
        /> -->
        <template v-for="(item1, index1) in item">
          <div :key="index1" class="font-gray" slot="description">
            <p style="margin: 0 0 5px 0; text-align: left;" :class="getColor(item1.status)">
              {{ item1.status == 1 ? '审批人: ' + item1.approverName : item1.approverName + '：' + item1.statusName }}
            </p>
          </div>
        </template>
      </a-step>
    </a-steps>
    <div class="isExamine" v-if="isExamine && approvalId" style="margin-top: 10px;">
      <a-row type="flex">
        <a-form-model ref="form" :rules="validatorRules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-col :span="24" :order="0">
            <a-form-model-item label="审批意见">
              <a-textarea :auto-size="{ minRows: 3, maxRows: 6 }" v-model="form.remark" :disabled="!isApprover" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" :order="0">
            <a-form-model-item label="审批人" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
              <a-input v-model="form.userName" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属单位" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
              <j-select-depart
                v-model="form.orgCode"
                :trigger-change="true"
                customReturnField="orgCode"
                :multi="true"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" :order="0">
            <a-form-model-item label="审批结果" prop="status">
              <a-radio-group v-model="form.status" name="radioGroup" :disabled="!isApprover">
                <a-radio :value="2"> 通过 </a-radio>
                <a-radio :value="3"> 驳回 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <!--//status为1(待审批)时，才能提交审批-->
          <a-col :span="24" :order="0" v-if="isApprover">
            <a-form-model-item :wrapper-col="{ offset: 20 }" style="margin-bottom: 0">
              <a-button type="primary" @click="onSubmit"> 确定 </a-button>
              <a-button style="margin-left: 10px" @click="onCancel"> 取消 </a-button>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import * as flowServerApi from '@/api/wxSmuggle/countersignServer.js'

export default {
  props: {
    // 是否审批窗口
    isExamine: {
      type: Boolean,
      default: false
    },
    // 审批流程id
    approvalId: {
      type: [String, Number]
    },
    // 当前审批节点id
    currentNodeId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      list: [],
      recordType: {
        0: '发起',
        1: '审批',
        2: '撤销'
      },
      form: {},
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
      status: null,
      urgeDisabled: false, // 催一下是否能操作
      validatorRules: {
        status: [{ required: true, message: '请选择审批结果', trigger: 'change' }],
        labelName: [{ required: true, message: '请选择标签', trigger: 'change' }]
      }
    }
  },
  computed: {
    // 是否需要审批
    isApprover() {
      if (this.status == 1) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getDetails()
  },
  methods: {
    getColor(status) {
      if (status == 1) {
        return 'grey'
      }
      if (status == 2) {
        return 'green'
      }
      if (status == 3) {
        return 'red'
      }
    },
    // 获取详情
    getDetails() {
      if (!this.approvalId) return
      let userInfo = Vue.ls.get(USER_INFO)
      let userId = userInfo.id //当前用户id
      this.$set(this.form, 'userName', userInfo.username)
      this.$set(this.form, 'orgCode', userInfo.orgCode)
      flowServerApi.getProcessDetail(this.approvalId).then(res => {
        if (res.success) {
          this.list = res.result
          let arr1 = []
          //找出当前登录用户的审批人记录，有可能为多条记录
          this.list.forEach(item1 => {
            item1.forEach(item2 => {
              if (item2.approverId === userId) {
                arr1.push(item2)
              }
            })
          })
          //找出当前审批节点
          let currentNode =
            arr1.find(obj => {
              return obj.id === this.currentNodeId
            }) || {}
          if (currentNode && Object.keys(currentNode).length > 0) {
            this.status = currentNode.status
            // console.log('currentNode')
            // console.log(currentNode)
            // 审批状态为通过或者驳回，才赋值到详情里
            if (!this.isApprover) {
              this.$set(this.form, 'remark', currentNode.remark)
              this.$set(this.form, 'status', currentNode.status)
            }
          }
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    // 提交
    onSubmit() {
      if (!this.approvalId) return
      this.$set(this.form, 'processId', this.approvalId)
      this.$refs.form.validate(valid => {
        if (valid) {
          let status = this.form.status === 2 ? '通过' : '驳回'
          flowServerApi
            .approval(this.form)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message + status)
                this.$emit('ok', 'success')
                this.$store.dispatch('OperateAjax', true)
              } else {
                this.$message.warn(res.message)
              }
            })
            .catch(e => {
              this.$message.warn('请求失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onCancel() {
      this.$emit('ok')
    },
    setStatus(value) {
      // 0：未审批，1：待审批，2：通过，3：驳回
      if (value === 1) {
        return 'process'
      } else if (value === 2) {
        return 'finish'
      } else if (value === 3) {
        return 'error'
      }
    },
    getContent(index, key) {
      let col = this.list.find((col, i) => i === index)
      if (col) {
        return col[key]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.font-gray {
  margin-top: 5px;
  p {
    font-size: 12px;
  }
}
.green {
  color: #52c41a;
}
.red {
  color: #ff4d4f;
}
.blue {
  color: #5a87db;
}
.grey {
  color: #666;
}
/deep/.ant-steps-item-description {
  margin-left: 28px;
  width: 100%;
}
/deep/.ant-steps-item:nth-child(1) {
  .font-gray {
    p {
      margin-left: 22px !important;
    }
  }
}
</style>